<template>
  <view class="content-pop">
    <up-popup
      :show="showCont"
      :round="10"
      :closeable="true"
      mode="bottom"
      @close="() => (showCont = false)"
      @open="open"
    >
      <view class="zdp-pop">
        <view class="title-cont">{{ title }}</view>
        <view class="date-cont">
          <picker-view
            :value="value"
            @change="handleChange"
            class="picker-view"
            :indicator-style="'height: 86rpx'"
          >
            <picker-view-column v-for="obj in SelArr">
              <view class="item" v-for="(item, index) in obj.child" :key="index">
                {{ item < 10 ? '0' + item : item }}{{ obj.value }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="top-cont">
          <view v-if="isDoubleBtn" @click="notSet()" class="notyet_btn">暂不设置</view>
          <view class="save-cont" @click="close(2)"> 确认 </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script>
import { whichWeek } from '@/pregnancy/index/utils'
import { getMonthStartEnd } from '@/pregnancy/index/utils'
import { getQuarterDates } from '@/pregnancy/index/utils'
export default {
  props: {
    type: {
      type: String,
      default: '日',
      validator(value, props) {
        return ['日', '月', '周', '年', '季'].includes(value)
      },
    },
    time: {
      type: String, //'2024-1-1' '2024-2' '2024-2' '2024-2' '2024
    },
    title: {
      type: String,
      default: '请选择日期',
    },
    isDoubleBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showCont: false,
      activeIdx: '日',
      value: [], //选择的值,要设置默认值
      dateArr: [],
      day: 18,
      week: 1,
      month: 1, //
      quarter: 2,
      years: 24,
      SelArr: [],
      range: '',
      zdpdate: '',
    }
  },
  computed: {
    selInfo() {
      let str = ''
      let { activeIdx, years, day, month, week, quarter } = this
      if (activeIdx == '日') {
        str = `20${years}年 ${month < 10 ? '0' + month : month}月 ${day < 10 ? '0' + day : day}日`
      }
      return str
    },
  },
  created() {},
  methods: {
    //
    handleProps() {
      let arr = []
      arr = this.time.split('-')
      if (this.type == '日') {
        this.month = arr[1] - 0
        this.day = arr[2] - 0
      } else if (this.type == '周') {
        this.week = arr[1] - 0
      } else if (this.type == '季') {
        this.quarter = arr[1] - 0
      } else if (this.type == '月') {
        this.month = arr[1] - 0
        this.quarter = this.handleQuarter(this.month)
      }
      for (let i = 0; i < arr.length; i++) {
        if (i == 0) {
          arr[0] = arr[0].slice(2)
          arr[0] -= 0
          this.years = arr[0]
        } else {
          arr[i]--
        }
      }
      // console.log('arr', this.month, arr)
      this.value = arr
    },
    // 初始化
    newDate() {
      const date = new Date()
      this.day = date.getDate()
      this.years = date.getFullYear()
      this.years = this.years.toString().slice(2, 4) - 0
      this.week = this.getYearWeek(date)
      this.month = date.getMonth() + 1
      this.quarter = this.handleQuarter(this.month)
      this.handleTabs(this.type)
      if (this.time) {
        this.handleProps()
        console.log('this.time', this.time)
        console.log(this.years, this.month, this.day)
      }
      // console.log('this.time', this.time)
      this.initArr()
    },
    initArr() {
      const date = new Date()
      let arr = []
      let { activeIdx } = this
      let day = []
      let week = []
      let month = []
      let quarter = []
      let years = []
      for (let i = 2000; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      if (activeIdx == '日') {
        if (this.years == date.getFullYear().toString().slice(2, 4)) {
          for (let i = 1; i <= date.getMonth() + 1; i++) {
            month.push(i)
          }
          if (
            this.month == date.getMonth() + 1 &&
            this.years == date.getFullYear().toString().slice(2, 4)
          ) {
            for (let i = 1; i <= date.getDate(); i++) {
              day.push(i)
            }
          } else {
            let num = this.getMonthDays(this.years, this.month)
            for (let i = 1; i <= num; i++) {
              day.push(i)
            }
          }
          let num = this.getMonthDays(this.years, this.month)
        } else {
          for (let i = 1; i <= 12; i++) {
            month.push(i)
          }
          let num = this.getMonthDays(this.years, this.month)
          for (let i = 1; i <= num; i++) {
            day.push(i)
          }
        }

        arr = [
          {
            value: '年',
            child: years,
          },
          {
            value: '月',
            child: month,
          },
          {
            value: '日',
            child: day,
          },
        ]
        this.zdpdate = `20${this.years}-${this.month < 10 ? '0' + this.month : this.month}-${
          this.day < 10 ? '0' + this.day : this.day
        }`
        this.range = `20${this.years}-${this.month < 10 ? '0' + this.month : this.month}-${
          this.day < 10 ? '0' + this.day : this.day
        }`
      }
      this.SelArr = arr
    },
    open() {
      this.newDate()
      this.showCont = true
    },
    close(num) {
      if (num == 1) {
        this.newDate()
        this.handleEmit()
      } else {
        this.handleEmit()
      }
      this.showCont = false
    },
    //暂不设置
    notSet() {
      this.showCont = false
      this.$emit('notSetFn')
    },
    handleEmit() {
      const date = new Date()
      let { zdpdate, range } = this
      console.log('this.zdpdate', this.zdpdate)
      let age = this.calculateAge(
        this.zdpdate,
        `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
      )
      if (age > 12) {
        return uni.showToast({
          title: '请选择0至12岁的出生日期范围',
          icon: 'none',
        })
      } else {
        this.$emit('submit-date', {
          zdpdate,
          range,
          type: this.activeIdx,
        })
      }
    },
    calculateAge(birthDateStr, endDateStr) {
      const birthDate = new Date(birthDateStr)
      const endDate = new Date(endDateStr)
      let age = endDate.getFullYear() - birthDate.getFullYear()
      // 如果结束日期的月份和日期小于出生日期的月份和日期，则年龄减一
      const m = endDate.getMonth() - birthDate.getMonth()
      if (m < 0 || (m === 0 && endDate.getDate() < birthDate.getDate())) {
        age--
      }
      return age
    },
    handleTabs(val) {
      this.activeIdx = val
      let { activeIdx, years, month, day, quarter, week } = this
      if (activeIdx == '日') {
        this.value = [years, month - 1, day - 1]
      } else if (activeIdx == '周') {
        this.value = [years, week - 1]
      } else if (activeIdx == '月') {
        this.value = [years, month - 1]
      } else if (activeIdx == '季') {
        this.value = [years, quarter - 1]
      } else if (activeIdx == '年') {
        this.value = [years]
      }
      // console.log(this.value, '选择的日期');
      this.initArr()
    },
    // 选择器选择
    handleChange(e) {
      console.log('e++++++++', e)
      let { value } = e.detail
      let { activeIdx } = this
      // console.log(value);
      // 年小于前面+0
      if (value[0] < 10) {
        value[0] = '0' + value[0]
      }
      this.years = value[0]
      if (activeIdx == '日') {
        this.month = value[1] + 1 //月
        this.day = value[2] + 1 //日
      } else if (activeIdx == '周') {
        this.week = value[1] + 1 //周
      } else if (activeIdx == '季') {
        this.quarter = value[1] + 1
      } else if (activeIdx == '月') {
        this.month = value[1] + 1 //月
      }
      this.initArr()
    },
    //获取当前月的天数
    getMonthDays(year, month) {
      var thisDate = new Date(year, month, 0)
      return thisDate.getDate()
    },
    getYearWeek(endDate) {
      //本年的第一天
      let beginDate = new Date(endDate.getFullYear(), 0, 1)
      //星期从0-6,0代表星期天，6代表星期六
      let endWeek = endDate.getDay()
      if (endWeek == 0) endWeek = 7
      let beginWeek = beginDate.getDay()
      if (beginWeek == 0) beginWeek = 7
      //计算两个日期的天数差
      let millisDiff = endDate.getTime() - beginDate.getTime()
      let dayDiff = Math.floor(
        (millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000,
      )
      return Math.ceil(dayDiff / 7) + 1
    },
    handleQuarter(month) {
      const oneQuarter = [1, 2, 3]
      const twoQuarter = [4, 5, 6]
      const threeQuarter = [7, 8, 9]
      let num
      if (oneQuarter.includes(month)) {
        num = 1
      } else if (twoQuarter.includes(month)) {
        num = 2
      } else if (threeQuarter.includes(month)) {
        num = 3
      } else {
        num = 4
      }
      return num
    },
  },
}
</script>

<style lang="scss" scoped>
.zdp-pop {
  // position: absolute;
  // bottom: 0%;
  // left: 0%;
  // box-sizing: border-box;
  padding: 24rpx;
  width: 100%;
  height: 700rpx;
  background-color: #fff;
  // transition: all 1s;
  border-radius: 25rpx 25rpx 0 0;

  .title-cont {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    text-align: center;
  }

  .top-cont {
    // width: 750rpx;
    // height: 96rpx;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    // .close-cont {
    //   color: #aaa;
    //   letter-spacing: 6rpx;
    // }

    // .text-info {
    //   display: flex;
    //   flex-direction: column;
    //   align-items: center;
    // }
    .notyet_btn {
      width: 250rpx;
      height: 88rpx;
      border-radius: 44rpx;
      border: 1rpx solid #54ceab;
      font-size: 32rpx;
      color: #2abe93;
      text-align: center;
      line-height: 88rpx;
      margin-right: 20rpx;
    }

    .save-cont {
      // width: 702rpx;
      flex: 1;
      height: 88rpx;
      background: #54ceab;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      color: #fff;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .tabs-cont {
    box-sizing: border-box;
    height: 80rpx;
    background-color: #f3f5f9;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    padding: 0 10rpx;

    .tab-list {
      min-width: 20%;
      display: flex;
      height: 60%;
      flex: 1;
      justify-content: center;
      border-radius: 4rpx;

      &.active {
        background-color: #fff;
      }
    }
  }

  .date-cont {
    height: calc(700rpx - 200rpx);
    margin-top: 40rpx;

    .picker-view {
      width: 100%;
      height: 100%;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f6f6f6;
      }

      .uni-picker-view-indicator {
        height: 100rpx;
      }
    }
  }
}
</style>
